<template>
  <div class="col-md-9">
    <!--问题标题-->
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">问题描述</h3>
        <div class="box-tools pull-right">
          <a @click.prevent="handleBack" class="btn btn-box-tool" title="返回"><i class="fa fa-reply"></i></a>
        </div>
      </div>

      <div class="box-body no-padding">
        <div class="mailbox-read-info">
          <h3>{{data.title}}</h3>
          <h5>
            From: {{data.createUserName}}
            <span class="mailbox-read-time pull-right">{{data.createDate}}</span>
          </h5>
        </div>
        <!--描述内容-->
        <div class="mailbox-read-message">
          {{data.content}}
        </div>
        <!--截图查看-->
        <div class="box-footer">
          <ul class="mailbox-attachments clearfix">
            <li v-for="(item, index) of data.photoList">
              <span class="mailbox-attachment-icon has-img"><img :src="absoluteImageUrl+'&path='+encodeURIComponent(item.path)"  style="height: 120px;" width="160" height="120" alt="照片不存在"></span>
              <div class="mailbox-attachment-info">
                <a @click.prevent="handleView(item.path)" class="mailbox-attachment-name"><i class="fa fa-paperclip"></i>系统截图{{index+1}}</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <Modal title="查看图片" width="50%" v-model="isDialogVisible">
      <img :src="absoluteImageUrl+'&path='+encodeURIComponent(currentPath)" style="width: 100%;">
    </Modal>
  </div>
</template>

<script>
  import {CONTEXT_PATH} from "../../assets/js/global";
  import {appendRequestParam} from "../../assets/js/utils/RequestUtils";

  export default {
    name:"ReadIssue",
    props:{
      data:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        currentPath:"",
        isDialogVisible: false
      }
    },
    computed:{
      absoluteImageUrl() {
        return appendRequestParam(CONTEXT_PATH + "/help/issue/getMediumIssuePhoto", "tokenId", localStorage.getItem("tokenId"));
      }
    },
    methods:{
      handleView(path) {
        this.currentPath = path;
        this.isDialogVisible = true;
      },
      handleBack() {
        this.$emit("onBack")
      },
      encodeURIComponent
    }
  }
</script>



// WEBPACK FOOTER //
// ReadIssue.vue?1a19ffa3
